<template>
  <div class="_Interface">
    <el-tabs v-model="currentTab">
      <el-tab-pane label="接口绑定" name="Inter">
        <div class="Inter">
          <div class="banner">
            *绑定微信公众号，<a href="https://mp.weixin.qq.com/" target="_blank"
              >此处</a
            >获取参数
          </div>
          <div class="input-group">
            <el-form :inline="true" label-position="left" label-width="100px">
              <el-form-item label="APPID">
                <el-input
                  placeholder="公众号ID"
                  size="small"
                  v-model="appid"
                ></el-input>
              </el-form-item>
              <el-form-item label="APPSECRET">
                <el-input
                  placeholder="公众号密钥"
                  size="small"
                  width="300px"
                  v-model="appsecret"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onReBind"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="菜单设置" name="Menu">
        <WXmenu />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import WXmenu from './WXmenu.vue'
import { useInterface } from '../../composable/useInterface'
import {
  ElTabs,
  ElTabPane,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
} from 'element-plus'
export default defineComponent({
  components: {
    ElTabs,
    ElTabPane,
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    WXmenu,
  },
  setup() {
    const { getAppConfig, appid, appsecret, onReBind } = useInterface()

    // 当前标签
    const currentTab = ref('Inter')

    onMounted(() => {
      getAppConfig()
      // getBindWXInfo()
    })
    return { currentTab, appid, appsecret, onReBind }
  },
})
</script>

<style lang="scss">
@import '../../assets/styles/_var.scss';
._Interface {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  overflow: auto;
  // 以下内容将会抽离到styles下
  .el-tabs {
    .el-tabs__active-bar {
      background: $green;
    }
    .el-tabs__item {
      &:hover {
        color: $green;
      }
      &.is-active {
        color: $green;
      }
    }
  }
  .Inter {
    padding: $pad-2;
    background: $gray-1;
    .banner {
      margin-bottom: $pad-1;
      font-size: 14px;
      letter-spacing: 1px;
      color: $gray-6;
      a {
        display: inline-block;
        font-weight: bold;
        color: $green;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .el-form {
      .el-form-item {
        margin-bottom: 0;
        .el-input {
          width: 300px;
        }
      }
    }
  }
}
</style>
